<template>
  <div style="width:100%;" :style="{height: fixed ? '50px' : 'auto'}">
    <div
      class="cu-tarbar"
      :style="{'border-bottom':border ? '0.5px solid #f2f2ff' : '0px','background-color':background ? background : '#fff'}"
      :class="fixed ? 'is_fixed' : ''"
    >
      <div class="left" @click.stop="clickLeft">
        <div class="left-icon" v-if="leftIcon || leftArrow">
          <!-- <van-icon :name="leftArrow ? 'arrow-left' : leftIcon"/> -->
          <div
            class="iconfont"
            :class="leftArrow ? 'icon-y' : leftIcon"
            :style="[{color: colorIconLeft ? colorIconLeft : (colorIcon ? colorIcon : '#1989fa')}, {'font-size':'18px'}]"
          ></div>
        </div>
        <div
          class="left-name"
          v-if="leftText"
          :style="{color:colorText ? colorText : ''}"
        >{{ leftText }}</div>
      </div>
      <div class="center">
        <div class="center-icon" v-if="centerIcon">
          <van-icon :name="centerIcon" :color="colorIcon ? colorIcon : '#1989fa'" size="50px"/>
        </div>
        <div
          class="center-name"
          v-if="centerText"
          :style="{color:colorText ? colorText : ''}"
        >{{ centerText }}</div>
      </div>
      <div class="right">
        <div class="right-icon" :class="rightIconCount&&rightIconCount>1 ? 'right-icon-block' : ''">
          <!-- <van-icon/> -->
          <div
            class="right-icon-1 iconfont"
            :class="rightFirstIcon"
            :style="[{color: colorIcon ? colorIcon : '#1989fa'}, {'font-size':'18px'}]"
            @click.stop="clickRightOne"
          ></div>
          <div class="dot" v-if="rightDot"></div>
          <van-icon v-if="rightIconCount&&rightIconCount>1" @click.stop="clickRightTwo"/>
          <div
            class="right-icon-2 iconfont"
            :class="rightSecondIcon"
            :style="[{color: colorIcon ? colorIcon : '#1989fa'}, {'font-size':'16px'}]"
            v-if="rightIconCount&&rightIconCount>1"
            @click.stop="clickRightTwo"
          ></div>
        </div>
        <div
          class="right-name"
          v-if="rightText&&(!rightIconCount||rightIconCount==1)"
          :style="{color:colorText ? colorText : ''}"
          @click="clickRightText"
        >{{ rightText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  props: [
    "leftText", // 左侧文案
    "leftIcon", // 左侧图标
    "leftDot", // 右侧红色小点
    "leftArrow", // 是否显示左侧箭头
    "centerText", // 中间文案
    "centerIcon", // 中间图标
    "rightIconCount", // 右侧图标数目
    "rightText", // 右侧文案 ，rightIconCount=1时生效
    "rightFirstIcon", // 右侧第一个图标
    "rightSecondIcon", // 右侧第二个图标
    "rightDot", // 右侧红色小点
    "colorIcon", // 图标颜色
    "colorIconLeft", // 左侧图标颜色，该值设定后，colorIcon对于左侧颜色失效
    "colorText", // 文字颜色
    "iconSize", // 文字大小
    "border", // 下边框
    "background", // 背景色,默认#fff
    "fixed" // 定位顶部
  ],
  watch: {
    centerText: {
      handler(val) {
        if (!val && !this.centerIcon) {
          // Toast("导航栏标题不能为空");
        }
      },
      immediate: true
    }
  },
  data() {
    return {};
  },
  methods: {
    clickLeft(e) {
      this.$emit("click-left", e);
    },
    clickRightText(e) {
      this.$emit("click-right-text", e);
    },
    clickRightOne(e) {
      this.$emit("click-right-first", e);
    },
    clickRightTwo(e) {
      this.$emit("click-right-second", e);
    }
  }
};
</script>

<style scope>
.cu-tarbar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #f2f2ff;
  display: flex;
  /* justify-content: space-between; */
  padding: 0 20px;
  background-color: #fff;
  /* 初始化 */
  color: #565656;
  font-size: 14px;
}
.cu-tarbar > .left,
.cu-tarbar > .right {
  width: 30%;
}
.cu-tarbar > .center {
  width: 40%;
}
.cu-tarbar > .left,
.cu-tarbar > .center,
.cu-tarbar > .right {
  display: flex;
}
.cu-tarbar > .left {
  justify-content: flex-start;
}
.cu-tarbar > .center {
  justify-content: center;
}
.cu-tarbar > .right {
  justify-content: flex-end;
}
.dot {
  width: 6px;
  min-width: 0;
  height: 6px;
  background-color: #ee0a24;
  border-radius: 100%;
  position: absolute;
  right: -2px;
  top: 16px;
}
.left-icon {
  overflow: hidden;
}
.right-icon {
  position: relative;
}
.right-icon-block {
  display: flex;
  justify-content: flex-end;
}
.left-icon i,
.center-icon i,
.right-icon i {
  line-height: 55px;
}
.right-icon-1 {
  padding: 0 5px 0 10px;
}
.right-icon-2 {
  padding: 0 5px 0 5px;
}
.is_fixed {
  width: 100%;
  position: fixed !important;
  top: 0px;
  left: 0px;
  z-index: 1999;
}
</style>
